<template>
	<div class="container" v-title data-title='分销助手'>
		<div class="header-info">
			<div class="headerImg">
				<img src="../../assets/images/header.png">
			</div>
			<p class="user-name">{{member.accountName}}</p>
		</div>
		<div class="entry-list">
			<div class="col-sm-6 recommend-number">
				<div class="template-row-list">
					<label class="label-title">推荐客户</label>
					<div class="row-content num"><strong>{{customer.reportCount}}</strong>位</div>
				</div>
			</div>
			<div class="col-sm-6 recommend-number">
				<div class="template-row-list">
					<label class="label-title">佣金总额</label>
					<div class="row-content num"><strong>{{customer.commissionAmount}}</strong>元</div>
				</div>
			</div>
		</div>
		<div class="recommend-commission-btn">
			<div class="col-sm-6">
				<div class="recommend-com-list" @click="addCustomer">
						<span class="iconImg" ></span>我要推荐
				</div>
			</div>
			<div class="col-sm-6">
				<div class="recommend-com-list botNo">
					<router-link href="javascript:;" to="/commission"><span class="iconImg"></span>我的佣金</router-link>
				</div>
			</div>
		</div>
		<div class="line bor-t bor-b"></div>
		<div class="unified-template">
			<div class="choice-city-region">
				<router-link class="choice-city" to="/cityList">
					<span class="location-icon"></span>
					<p class="city-name">{{cityName}}</p>
					<i class="fa fa-caret-right"></i>
				</router-link>
			</div>
			<ul class="city-info-list">
				<li v-for="(item, index) in premisesList" >
					<div class="residential-details">
						<div class="residential-img"  @click="toPremisesDetail(item.id)">
							<span class="residential-icon" v-if="!(item.reward==0)">带看有奖</span>
							<img :src="item.url">
							<div class="residential-mask"></div>
							<div class="residential-mask-info">
								<div class="col-sm-6 name">[ {{item.area.name}} ] {{item.name}}</div>
								<div class="col-sm-6 square">{{item.averagePrice}}&nbsp;元/平米</div>
							</div>
						</div>
						<div class="recommend-residential">
							<div class="userNum">已推荐<span class="tNum">{{item.reportCount == null?0:item.reportCount}}</span>位客户</div>
							<a href="javascript:;" class="recommendBtn" @click="toRecCustomer(item.id)">
								<i class="fa fa-thumbs-o-up"></i>推荐客户
							</a>
						</div>
					</div>
				</li>
			</ul>
			<mugen-scroll :handler="getPremisesList" :should-handle="!loading" >
			</mugen-scroll>
		</div>
	</div>
</template>
<script>
import MugenScroll from 'vue-mugen-scroll'
export default{
	data(){
		return {
			params:{
				pageSize: 15,
				pageNo: 0,
				cityId:"",
				areaId: ""
			},
			cityName:"全部城市",
			customer:{
				totalAmount:0,
				reportCount:0,
				commissionAmount:0.0
			},
			member:{
				accountName: window.sessionStorage.getItem(this.utilHelper.appAgency+"_userName"),
				accountId: window.sessionStorage.getItem(this.utilHelper.appAgency+"_userId")
			},
			premisesList:[],
			loading: false
		}
	},
	components: {
		MugenScroll
	},
	mounted: function() {
	   this.getPartnerInfo();
       this.initCustomerInfo();
       this.operationHeader();
        $("#goble_menu_div").show();
        // this.showTips();
        if(this.$route.params.cityName){
			 this.cityName = this.$route.params.cityName;
		}
	},
	methods:{
		initCustomerInfo:function(){
			var _self = this;
			var body = {};
			body.params = {}
			var url = this.utilHelper.apiUrl+'/api/getCustomerPremises';
			this.$http.post(url,body).then((response)=>{
				var body = response.body;
				if(body.result==1){
					this.customer.commissionAmount = _self.changeToDecimal(body.resData.commissionAmount,2);
					this.customer.reportCount= body.resData.reportCount;
				}
			});
		},
		//实时获取用户信息
        getPartnerInfo(){
	        var _self = this;
	        var body = {};
	        body.params = {}
	        var url = this.utilHelper.apiUrl+'/api/getUserById';
	          _self.$http.post(url, body).then((response) => {
	              var data = response.body.resData;
	              var result = data.result;
	              if (result == "1") {
	                  window.sessionStorage.setItem(_self.utilHelper.appAgency+"_userId", data.id);
	                  window.sessionStorage.setItem(_self.utilHelper.appAgency+"_userName", data.accountName);
	                  window.sessionStorage.setItem(_self.utilHelper.appAgency+"_phone", data.phone);
	                  window.sessionStorage.setItem(_self.utilHelper.appAgency+"_isLogin", true);
	                  window.sessionStorage.setItem(_self.utilHelper.appAgency+"_userRole", data.userRoleId);
	                  window.sessionStorage.setItem(_self.utilHelper.appAgency+"_accountType",data.accountType);
	              }
	          });
	      },
		getPremisesList:function(){
				var index = layer.load();
				var _self = this;
			    _self.loading = true;
			    _self.params.cityId = _self.$route.params.cityId;
			    if(!_self.$route.params.cityId){
			    	_self.params.cityId=""
			    }
			    if(!_self.$route.params.cityId){
			    	_self.params.areaId=""
			    }
			    
			    _self.params.pageNo = _self.params.pageNo+1;
			    var body = {};
			    body.params = _self.params;
				var url = _self.utilHelper.apiUrl+'/api/getAgentPremisesPage';
				_self.$http.post(url,body).then((response)=>{
					layer.close(index);
					var body = response.body;
					if(body.result=="1"){
						var rows = body.resData.getAgentPremisesPage.rows;
						var total = body.resData.getAgentPremisesPage.totalPages;
						var current = body.resData.getAgentPremisesPage.pageNumber;
						if(_self.params.pageNo>total){
							_self.loading = true;
						}else{
							_self.loading = false;
						}
						for(var i=0;i<rows.length;i++){
							_self.premisesList.push(rows[i]);
						}
					}else{
						window.sessionStorage.setItem(_self.utilHelper.appAgency+"_isLogin", "-1");
						_self.$router.replace({
							path: '/login'
						})
					}
				});
		},
		operationHeader:function(){
			var tHeight = $(".choice-city-region").offset().top;
			$(window).scroll(function() {
				var iScrollT = $(window).scrollTop();
				if(iScrollT > tHeight){
					$(".choice-city-region").css("position","fixed");
				}else{
					$(".choice-city-region").css("position","relative");
				}	
			});
		},
		toPremisesDetail(id) {
			this.$router.push({
				path: '/premisesDetail/'+id
			})
		},
		toRecCustomer(id) {
            //若为游客则弹出绑定对话框
            if(this.tourist()){
                return ;
            }
			this.$router.push({
				path: '/recommendCustomer/'+id
			})
		},
		changeToDecimal(value, point){
			var f_x = parseFloat(value);
		    if (isNaN(f_x)) {
		       value = "0";
		    }
		    var f_x = Math.round(value * 100) / 100;
		    var s_x = f_x.toString();
		    var pos_decimal = s_x.indexOf('.');
		    if (pos_decimal < 0) {
		        pos_decimal = s_x.length;
		        s_x += '.';
		    }
		    while (s_x.length <= pos_decimal + point) {
		        s_x += '0';
		    }
		    return s_x;
		},
        addCustomer(){
            //若为游客则弹出绑定对话框
            if(this.tourist()){
                return ;
            }
            this.$router.push({
                path: '/addCustomer'
            })
		},
		//初次进入要显示提示
		showTips(){
            var _self = this;
            if(window.sessionStorage.getItem(_self.utilHelper.appAgency+"_isRegister") && window.sessionStorage.getItem(_self.utilHelper.appAgency+"_isRegister") == 'true'){
                window.sessionStorage.removeItem(_self.utilHelper.appAgency+"_isRegister");
                layer.confirm('您的初始登录密码为：x1234567,请及时设置', {
                    btn: ['以后再说','去设置'], //按钮
                    shade: false //不显示遮罩
                }, function(){
                    layer.closeAll();
                }, function(){
                    _self.$router.push({
                        path: '/changepwd'
                    })
                });
			}
		}
	}
}
</script>


					